<template>
  <Right_box>
    <Box class="box" :height="1080">
      <Box :height="300" class="contentBox">
        <Lease_title>城市人口流动</Lease_title>
        <V3Echarts :options="option1()" container="emergencylbox2" :height="250" :width="430"></V3Echarts>
      </Box>
      <Box :height="280" class="contentBox">
        <Lease_title>城市人口概况</Lease_title>
        <div class="info_list">
          <div class="item" v-for="item in personInfoList" :key="item.info">
            <div class="info">
              <img class="img" src="@/assets/images/panel/in.png" alt="" />
              <span>{{ item.info }}</span>
            </div>
            <div class="count">
              {{ item.count }}
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </Box>
      <Box :height="500" class="contentBox">
        <Lease_title>各区人口概况TOP5(万人)</Lease_title>
        <V3Echarts :options="option4()" container="emergencylbox2" :height="400" :width="430"></V3Echarts>
      </Box>
    </Box>
  </Right_box>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import Lease_title from '@/components/Lease_title/index.vue'
import Right_box from '@/components/right_box.vue'
import Box from '@/components/Box/index.vue'
import V3Echarts from '@/components/V3Echarts/index.vue'

import { option1, option4 } from '../options/index'
const personInfoList = reactive([
  {
    count: 128478,
    info: '常住人口',
    unit: '万人'
  },
  {
    count: 831.8,
    info: '外来人口',
    unit: '万人'
  },
  {
    count: 128478,
    info: '常住人口',
    unit: '万人'
  },
  {
    count: 1052.62,
    info: '城镇人口',
    unit: '万人'
  },
  {
    count: 7.08,
    info: '户籍人口出生率',
    unit: '%'
  },
  {
    count: 0.28,
    info: '户籍人口自然增长率',
    unit: '%'
  }
])
</script>
<style lang="scss" scoped>
.box {
  @include MarginBottom(15);
}
.contentBox {
  @include Padding(15, 0, 0, 0);
}
.info_list {
  @include MarginBottom(10);
  @include MarginLeft(10);
  @include Width(280);
  .item {
    display: flex;
    @include Width(400);
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff2a;
    @include Padding(8, 5, 8, 5);
    .info {
      @include FontSize(16);
      display: flex;
      align-items: center;
      .img {
        margin-right: 5px;
      }
    }
    .count {
      @include FontSize(18);
      font-family: PangMenZhengDao;
      color: #00ffff;
    }
  }
}
</style>
